@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "shared/styles/_mixins.scss";

.conversejs {
    @import "bootstrap/scss/card";

    converse-chats {
        &.converse-embedded,
        &.converse-fullscreen {
            .message {
                .card--unfurl {
                    margin: 1em 0;
                    @include media-breakpoint-down(sm) {
                        max-width: 95%;
                    }
                    @include media-breakpoint-up(md) {
                        max-width: 75%;
                    }
                    @include media-breakpoint-up(lg) {
                        max-width: 66%;
                    }
                    @include media-breakpoint-up(xl) {
                        max-width: 50%;
                    }
                }
            }
        }
    }
}

.conversejs {
    converse-chats {
        &.converse-overlayed,
        &.converse-mobile {
            .message {
                .card--unfurl {
                    margin: 1em 0;
                    max-width: 95%;
                }
            }
        }
    }
}
